TypeScriptãåå®å šæ§ã掻çšãããšã©ãŒãæžãããç·æ¥æã®ã³ã©ãã¬ãŒã·ã§ã³ãæ¹åããããšã§ãã€ã³ã·ãã³ã察å¿ããã»ã¹ã匷åããæ¹æ³ãåŠã³ãŸããããéçºè ãšSREåãã°ããŒãã«ã¬ã€ãã
TypeScript ã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ïŒç·æ¥æå¯Ÿå¿ã«ãããåå®å šæ§
ã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã¯ããœãããŠã§ã¢ã«äŸåããããããçµç¹ã«ãšã£ãŠäžå¯æ¬ ãªæ©èœã§ããã·ã¹ãã é害ãçºçããå Žåãæéã¯éåžžã«éèŠã§ããé©åã«èª¿æŽããå¹ççãªå¯Ÿå¿ã¯ãããŠã³ã¿ã€ã ãæå°éã«æããããŒã¿æå€±ãé²ããçµç¹ã®è©å€ãä¿è·ããããšãã§ããŸããã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ãæ¯æŽããå€ãã®ããŒã«ãããã»ã¹ãååšããŸãããããã°ã©ãã³ã°èšèªèªäœã®åœ¹å²ã¯èŠéããããã¡ã§ããããã«TypeScriptãæŽ»èºããäœå°ããããŸããTypeScriptã®åå®å šæ§æ©èœã掻çšããããšã§ãããŒã ã¯ã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã®åãçµã¿ã®é床ãšç²ŸåºŠãå€§å¹ ã«åäžãããããšãã§ããŸãã
ã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã«ãããŠåå®å šæ§ãéèŠãªçç±
ã€ã³ã·ãã³ãçºçæãéçºè ã¯åé¡ãè¿ éã«èšºæã解決ãããšããéæ¹ããªããã¬ãã·ã£ãŒã«ãããããããšããããããŸãããã®ãã¬ãã·ã£ãŒã¯ãç¹ã«è€éãªã·ã¹ãã ãäžæ £ããªã³ãŒããæ±ãå Žåã«ããã¹ã«ã€ãªããå¯èœæ§ããããŸããTypeScriptã®äž»èŠæ©èœã§ããåå®å šæ§ã¯ãã©ã³ã¿ã€ã ã§ã¯ãªãã³ã³ãã€ã«æã«ãšã©ãŒãææããããšã§ããããã®ãªã¹ã¯ã軜æžããã®ã«åœ¹ç«ã¡ãŸãããã®ä»çµã¿ã¯ä»¥äžã®éãã§ãã
- ãšã©ãŒã®åæž: TypeScriptã®åãã§ãã«ãŒã¯ãã³ãŒãããããã€ãããåã«æœåšçãªãšã©ãŒãæ€åºãã颿°ã«èª€ã£ãåã®ããŒã¿ãæž¡ããããååšããªãããããã£ã«ã¢ã¯ã»ã¹ããããããªã©ã®äžè¬çãªåé¡ã鲿¢ããŸãã
- ã³ãŒãã®æç¢ºæ§ã®åäž: åã¯ã颿°ãã¢ãžã¥ãŒã«ã®æåŸ ãããå ¥åãšåºåãæç¢ºãã€ç°¡æœã«ææžåããæ¹æ³ãæäŸããŸããããã«ãããéçºè ã¯ã¹ãã¬ã¹ã®å€ãç¶æ³äžã§ãã³ãŒããçè§£ãããããªããŸãã
- ãããã°ã®é«éå: ãšã©ãŒãçºçããå ŽåãTypeScriptã®ã¹ã¿ãã¯ãã¬ãŒã¹ã¯JavaScriptã®ãã®ããã詳现ã§ããããšãå€ããåé¡ã®æ ¹æ¬åå ãç¹å®ãããããªããŸãã
- ã³ã©ãã¬ãŒã·ã§ã³ã®åŒ·å: åã¯éçºè éã®å ±éèšèªãšããŠæ©èœããç¹ã«å€§èŠæš¡ã§å°ççã«åæ£ããããŒã ã«ãããŠãããè¯ãã³ãã¥ãã±ãŒã·ã§ã³ãšã³ã©ãã¬ãŒã·ã§ã³ãä¿é²ããŸãã
ã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã«ãããTypeScriptã®å®è·µçãªäŸ
äŸ1ïŒAPIåŒã³åºãã«ãããåãã¹ãããã®é²æ¢
APIãäºæããªãããŒã¿ãè¿ãã€ã³ã·ãã³ããæ³åããŠã¿ãŠãã ãããåå®å šæ§ããªãå Žåãã¢ããªã±ãŒã·ã§ã³ãå¿çãæ£ããåŠçã§ããªãçç±ããããã°ããã®ã«ããªãã®æéããããå¯èœæ§ããããŸããTypeScriptã䜿çšãããšãAPIå¿çã®æåŸ ãããæ§é ãèšè¿°ããã€ã³ã¿ãŒãã§ãŒã¹ãå®çŸ©ã§ããŸããAPIããã®ã€ã³ã¿ãŒãã§ãŒã¹ã«æºæ ããªãããŒã¿ãè¿ããå ŽåãTypeScriptã³ã³ãã€ã©ã¯ãšã©ãŒãå ±åããŸãã
// Define the expected API response type
interface User {
id: number;
name: string;
email: string;
}
// Function to fetch user data from the API
async function fetchUser(id: number): Promise<User> {
const response = await fetch(`/api/users/${id}`);
const data = await response.json();
return data as User; // Type assertion
}
// Example usage
async function displayUser(userId: number) {
try {
const user = await fetchUser(userId);
console.log(`User Name: ${user.name}`);
} catch (error) {
console.error("Failed to fetch user:", error);
}
}
ãã®äŸã§ã¯ãAPIã`name`ããããã£ãæååã§ã¯ãªãæ°å€ã§ããå¿çãè¿ããå ŽåãTypeScriptã¯ã³ã³ãã€ã«æãšã©ãŒãçºè¡ããã¢ããªã±ãŒã·ã§ã³ãã¯ã©ãã·ã¥ããã誀ã£ãããŒã¿ã衚瀺ãããããã®ãé²ããŸãã
äŸ2ïŒãŠããªã³åã«ãããšã©ãŒã®é©åãªåŠç
ã€ã³ã·ãã³ãçºçæã«ã¯ããšã©ãŒãé©åã«åŠçãããŠãŒã¶ãŒã«åããããããã£ãŒãããã¯ãæäŸããããšãéèŠã§ããTypeScriptã®ãŠããªã³åã䜿çšãããšãæåå€ãŸãã¯ãšã©ãŒãªããžã§ã¯ãã®ãããããè¿ãããšãã§ãã颿°ãå®çŸ©ã§ããäž¡æ¹ã®ã±ãŒã¹ãæç€ºçã«åŠçãããã匷å¶ãããŸãã
// Define a type for the result of an operation
type Result<T, E> = { success: true; value: T } | { success: false; error: E };
// Function to perform a database operation
async function getUserFromDatabase(id: number): Promise<Result<User, string>> {
try {
// Simulate a database query
const user = await db.query("SELECT * FROM users WHERE id = ?", [id]);
if (!user) {
return { success: false, error: "User not found" };
}
return { success: true, value: user };
} catch (error) {
return { success: false, error: error.message };
}
}
// Example usage
async function processUser(userId: number) {
const result = await getUserFromDatabase(userId);
if (result.success) {
console.log("User:", result.value);
} else {
console.error("Error:", result.error);
}
}
ãã®ã¢ãããŒãã«ãããæœåšçãªãšã©ãŒãåžžã«åŠçããäºæããªãã¯ã©ãã·ã¥ãé²ããããæçãªãšã©ãŒã¡ãã»ãŒãžãæäŸã§ããŸãã
äŸ3ïŒå€å¥å¯èœãªãŠããªã³ã䜿çšããè€éãªç¶æ 管ç
ã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã«ã¯ãå€ãã®å Žåãè€éãªç¶æ 管çã䌎ããŸããå€å¥å¯èœãªãŠããªã³ã¯ãç°ãªãç¶æ ã衚çŸããåç¶æ ãæ£ããåŠçããããã®åŒ·åãªæ¹æ³ãæäŸããŸãã
// Define a discriminated union for different request states
type RequestState =
| { status: "loading" }
| { status: "success"; data: any }
| { status: "error"; error: string };
// Function to handle different request states
function handleRequestState(state: RequestState) {
switch (state.status) {
case "loading":
console.log("Loading...");
break;
case "success":
console.log("Data:", state.data);
break;
case "error":
console.error("Error:", state.error);
break;
}
}
// Example usage
handleRequestState({ status: "loading" });
handleRequestState({ status: "success", data: { name: "John Doe" } });
handleRequestState({ status: "error", error: "Failed to fetch data" });
ã³ã³ãã€ã©ã¯ããã¹ãŠã®å¯èœãªç¶æ ãåŠçããããšãä¿èšŒããäºæããªãåäœãé²ããã³ãŒããããå ç¢ã«ããŸãã
TypeScriptã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã®ãã¹ããã©ã¯ãã£ã¹
- æç¢ºãªåä»ãèŠåã®ç¢ºç«: ã³ãŒãã®å¯èªæ§ãšä¿å®æ§ãåäžãããããã«ãåã«å¯ŸããŠäžè²«ããåœåèŠåãšã³ãŒãã£ã³ã°ã¹ã¿ã€ã«ãå®çŸ©ããŸãã
- å æ¬çãªåäœãã¹ãã®äœæ: åäœãã¹ãã¯ãéçºããã»ã¹ã®æ©ã段éã§ãšã©ãŒãç¹å®ããŠä¿®æ£ããã€ã³ã·ãã³ãã®çºçå¯èœæ§ãäœæžããã®ã«åœ¹ç«ã¡ãŸãããšã©ãŒåŠçãšãšããžã±ãŒã¹ãã«ããŒãããã¹ãã確å®ã«å«ããŸãã
- å ç¢ãªãã®ã³ã°ã®å®è£ : 詳现ãªãã°ã¯ãã€ã³ã·ãã³ãã®èšºæã«è²Žéãªæ å ±ãæäŸããŸãããã°ã«ã¯é¢é£ããã³ã³ããã¹ããšãšã©ãŒã¡ãã»ãŒãžãå«ããŸããåæã容æã«ããããã«ãæ§é åãã®ã³ã°åœ¢åŒïŒäŸïŒJSONïŒã®äœ¿çšãæ€èšããŠãã ããã
- éçè§£æããŒã«ã®äœ¿çš: éçè§£æããŒã«ã¯ãã³ãŒããå®è¡ãããåã§ãã£ãŠããæœåšçãªåé¡ãç¹å®ã§ããŸãããããã®ããŒã«ãCI/CDãã€ãã©ã€ã³ã«çµ±åãããšã©ãŒãèªåçã«ãã§ãã¯ããŸããTypeScriptãµããŒãä»ãã®ESLintãäžè¬çãªéžæè¢ã§ãã
- ããŒã«ããã¯ã®èªåå: å Žåã«ãã£ãŠã¯ãã€ã³ã·ãã³ãã解決ããæéã®æ¹æ³ã¯ã以åã®ããŒãžã§ã³ã®ã³ãŒãã«ããŒã«ããã¯ããããšã§ããããŠã³ã¿ã€ã ãæå°éã«æããããã«ããã®ããã»ã¹ãèªååããŸãã
- ã€ã³ã·ãã³ãåŸã®åæ: ã€ã³ã·ãã³ãã解決ãããåŸãåé¡ã®æ ¹æ¬åå ãç¹å®ããå°æ¥åæ§ã®ã€ã³ã·ãã³ããçºçããã®ãé²ãããã«ã培åºçãªã€ã³ã·ãã³ãåŸåæã宿œããŸããåŠãã æèšãææžåããããã«å¿ããŠããã»ã¹ãæŽæ°ããŸãã
- åœéåïŒi18nïŒãšããŒã«ãªãŒãŒã·ã§ã³ïŒl10nïŒ: ãšã©ãŒã¡ãã»ãŒãžãšãã°ãç°ãªãå°åãšèšèªåãã«ããŒã«ã©ã€ãºãããŠããããšã確èªããŸããããã«ãããåœéããŒã ãã€ã³ã·ãã³ããçè§£ã解決ãããããªããŸãã
- ã¿ã€ã ãŸãŒã³ã®èªè: è€æ°ã®ã¿ã€ã ãŸãŒã³ã®ãŠãŒã¶ãŒã«åœ±é¿ãäžããã€ã³ã·ãã³ããæ±ãå Žåã¯ãã¿ã€ã ãŸãŒã³ã®å€æã«æ³šæããŠãã ããããã®ã³ã°ãšã¬ããŒãã«ã¯äžè²«ããã¿ã€ã ãŸãŒã³ïŒäŸïŒUTCïŒã䜿çšããŸãã
- ã³ãã¥ãã±ãŒã·ã§ã³ãã£ãã«: ã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã®ããã®æç¢ºãªã³ãã¥ãã±ãŒã·ã§ã³ãã£ãã«ã確ç«ããŸããå°çšã®ãã£ããã«ãŒã ãŸãã¯ã¡ãã»ãŒãžã³ã°ã·ã¹ãã ã䜿çšããŠã飿ºã調æŽããŸãããªã³ã³ãŒã«ãšã³ãžãã¢ãžã®ã¢ã©ãŒãã«ã¯ãPagerDutyã®ãããªã·ã¹ãã ã®äœ¿çšãæ€èšããŠãã ããã
- ã»ãã¥ãªãã£äžã®èæ ®äºé : ã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ãã»ãã¥ãªãã£ã€ãã³ããšããŠæ±ããŸããæ©å¯ããŒã¿ãä¿è·ãããã·ã¹ãã ãžã®ã¢ã¯ã»ã¹ãé©åã«å¶åŸ¡ãããŠããããšã確èªããŸãã
广çãªã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã®äžçç圱é¿
仿¥ã®çžäºæ¥ç¶ãããäžçã§ã¯ããœãããŠã§ã¢ã®ã€ã³ã·ãã³ãã¯åºç¯å²ã«ããã圱é¿ãåãŒããäžçäžã®ãŠãŒã¶ãŒãããžãã¹ãããã«ã¯éèŠãªã€ã³ãã©ã¹ãã©ã¯ãã£ã«åœ±é¿ãäžããŸãããããã£ãŠã广çãªã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã¯ãä¿¡é Œãç¶æããäºæ¥ç¶ç¶ã確ä¿ãã瀟äŒã®å¹žçŠãä¿è·ããããã«äžå¯æ¬ ã§ãã以äžã®åœéçãªäŸãèæ ®ããŠãã ããã
- éèæ©é¢: ããåœã®éè¡ã§ã®ã»ãã¥ãªãã£äŸµå®³ã¯ãäžçäžã®é¡§å®¢ã®éèããŒã¿ãå±éºã«ãããå¯èœæ§ããããŸããè¿ éãã€å¹æçãªã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã¯ã䟵害ãå°ã蟌ãããããªãæå®³ãé²ãããã«æ¥µããŠéèŠã§ãã
- Eã³ããŒã¹ãã©ãããã©ãŒã : Eã³ããŒã¹ãã©ãããã©ãŒã ã§ã®å€§èŠæš¡ãªé害ã¯ãç°ãªãåœã®äœçŸäžäººãã®äººã ã®ãªã³ã©ã€ã³ã·ã§ããã³ã°ãäžæãããå€å€§ãªçµæžçæå€±ã«ã€ãªããå¯èœæ§ããããŸãã
- å»çæäŸè : ç é¢ãžã®ã©ã³ãµã ãŠã§ã¢æ»æã¯ãéèŠãªã·ã¹ãã ã麻çºãããæ£è ã®åœãå±éºã«ãããå¯èœæ§ããããŸãããµãŒãã¹ã埩æ§ããæ£è ã®å®å šã確ä¿ããããã«ã¯ãè¿ éãã€å調çãªã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ãäžå¯æ¬ ã§ãã
- èªç©ºäŒç€Ÿ: èªç©ºäŒç€Ÿã®äºçŽã·ã¹ãã ã«ããããœãããŠã§ã¢ã®äžå ·åã¯ããã©ã€ãã®é å»¶ãæ¬ èªãåŒãèµ·ãããäžçäžã®æ è¡è ã«åœ±é¿ãäžããå¯èœæ§ããããŸãã
ãããã®äŸã¯ãçµç¹ã®èŠæš¡ãæåšå°ã«é¢ããããå ç¢ãªã€ã³ã·ãã³ãã¬ã¹ãã³ã¹èšç»ãçå®ããããšã®éèŠæ§ãæµ®ã圫ãã«ããŠããŸããTypeScriptã¯ããã®åå®å šæ§æ©èœã«ãããçµç¹ãã€ã³ã·ãã³ãã«è¿ éãã€å¹æçã«å¯Ÿå¿ãããŠãŒã¶ãŒãšéçšãžã®åœ±é¿ãæå°éã«æããäžã§éèŠãªåœ¹å²ãæããããšãã§ããŸãã
TypeScriptã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã®ããã®ããŒã«ãšãã¯ãããžãŒ
ããã€ãã®ããŒã«ãšãã¯ãããžãŒããã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ã®ããã«TypeScriptãæŽ»çšããã®ã«åœ¹ç«ã¡ãŸãã
- ESLintãšTypeScriptãã©ã°ã€ã³: ãã®ãªã³ã¿ãŒã¯ãTypeScriptã³ãŒãå ã®åãšã©ãŒãæªäœ¿çšå€æ°ãã³ãŒãã¹ã¿ã€ã«éåãªã©ãå¹ åºãæœåšçãªãšã©ãŒãæ€åºã§ããŸãã
- TypeScriptã³ã³ãã€ã©ïŒtscïŒ: TypeScriptã³ã³ãã€ã©ã¯ãã«ãããã»ã¹ã«çµ±åã§ããã³ãŒãããããã€ãããåã«åãšã©ãŒãèªåçã«ãã§ãã¯ããŸãã
- ãœãŒã¹ããã: ãœãŒã¹ãããã䜿çšãããšãã³ãŒããJavaScriptã«ãã©ã³ã¹ãã€ã«ãããŠããå Žåã§ãããã©ãŠã¶ã§TypeScriptã³ãŒãããããã°ã§ããŸããããã«ããããšã©ãŒã®æ ¹æ¬åå ãç¹å®ãããããªããŸãã
- ãããã¬ãŒ: ææ°ã®ãããã¬ãŒïŒäŸïŒVS CodeãChrome DevToolsïŒã¯ãã³ãŒãã®ã¹ãããå®è¡ããã¬ãŒã¯ãã€ã³ãã®èšå®ã倿°ã®æ€æ»ãªã©ãTypeScriptã³ãŒãã®ãããã°ãåªãããµããŒãã§æäŸããŸãã
- ç£èŠããŒã«: ç£èŠããŒã«ã¯ãã€ã³ã·ãã³ãããšã¹ã«ã¬ãŒãããåã«æœåšçãªã€ã³ã·ãã³ããèŠåã§ããŸããå¿çæéããšã©ãŒçããªãœãŒã¹äœ¿çšçãªã©ã®äž»èŠãªã¡ããªãã¯ã远跡ããããã«ç£èŠããŒã«ã䜿çšããŸããäŸãšããŠPrometheusãGrafanaãDatadogããããŸãã
- ãã®ã³ã°ã©ã€ãã©ãª: å ç¢ãªãã®ã³ã°ã©ã€ãã©ãªã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ã®åäœã«é¢ãã詳现æ å ±ãèšé²ããŸããåæã容æã«ããããã«ãæ§é åãã®ã³ã°åœ¢åŒïŒäŸïŒJSONïŒã®äœ¿çšãæ€èšããŠãã ãããäŸãšããŠWinstonãšBunyanããããŸãã
- ã€ã³ã·ãã³ã管çãã©ãããã©ãŒã : ã€ã³ã·ãã³ã管çãã©ãããã©ãŒã ïŒäŸïŒPagerDutyãOpsgenieïŒã¯ãã€ã³ã·ãã³ã察å¿ã®èª¿æŽãšç®¡çãæ¯æŽããŸãããããã®ãã©ãããã©ãŒã ã¯ãã¢ã©ãŒãããªã³ã³ãŒã«ã¹ã±ãžã¥ãŒãªã³ã°ãã€ã³ã·ãã³ãåŸåæãªã©ã®æ©èœãæäŸããŸãã
çµè«
TypeScriptã®åå®å šæ§æ©èœã¯ãã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ããã»ã¹ãå€§å¹ ã«åŒ·åãããšã©ãŒãåæžããã³ãŒãã®æç¢ºæ§ãåäžãããããè¯ãã³ã©ãã¬ãŒã·ã§ã³ãä¿é²ããŸããTypeScriptãæ¡çšãããã®èšäºã§æŠèª¬ãããŠãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãçµç¹ã¯éèŠãªã€ã³ã·ãã³ãäžã«ããŠã³ã¿ã€ã ãæå°éã«æããããŒã¿æå€±ãé²ããè©å€ãä¿è·ããããšãã§ããŸãããœãããŠã§ã¢é害ãåºç¯å²ã«ããã圱é¿ãåãŒããçžäºæ¥ç¶ããã°ããŒãã«åãé²ãçŸä»£äžçã«ãããŠãTypeScriptããŒã¹ã®ã€ã³ã·ãã³ãã¬ã¹ãã³ã¹ãžã®æè³ã¯ãäºæ¥ç¶ç¶æ§ã確ä¿ããäžçäžã®ãŠãŒã¶ãŒã®ä¿¡é Œãç¶æããããã®æŠç¥çèŠä»¶ã§ããTypeScriptãæäŸããããã¢ã¯ãã£ããªã¢ãããŒãã¯ãããé«éãªãããã°ãããä¿¡é Œæ§ã®é«ããããã€ããããŠããå埩åã®ããå šäœçãªã·ã¹ãã ãå¯èœã«ããåœéçãªå¢çãè¶ããçŸä»£ã®ãœãããŠã§ã¢éçºãšãããã€ã®è€éããä¹ãè¶ããäžã§äžå¯æ¬ ã§ãã